<template>
    <div class="container">
        <el-table :data="courseData" border stripe style="width: 100%">
            <el-table-column prop="courseName" label="课程" />
            <el-table-column prop="courseDeadline" label="截止时间" />
            <el-table-column label="管理">
                <template #default="{ row }">
                    <el-button type="success" @click="checkCourseInfo(row)">
                        查看课程信息
                    </el-button>
                    <el-button type="danger">
                        退课
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog v-model="showCourseInfo">
            <template #header>
                {{ selectedCourse.courseName }}
            </template>
            {{ selectedCourse.courseInfo }}
        </el-dialog>
    </div>
</template>

<script setup>
import { ref } from 'vue';

const showCourseInfo = ref(false)
const selectedCourse = ref({})
const courseData = [
    {
        courseName: "蓝桥杯备赛",
        courseInfo: "这是蓝桥杯备赛的详细信息",
        courseDeadline: "2024-10-01",
    },
    {
        courseName: "数据结构专项训练",
        courseInfo: "这是数据结构专项训练的详细信息",
        courseDeadline: "2025-9-01",
    }
]

function checkCourseInfo(rowData) {
    showCourseInfo.value = true
    selectedCourse.value = rowData
}
</script>

<style scoped>
.container {
    padding: 20px 0;
}
</style>